{extend name='common/content' /}

{block name="content"}

<div id="e2" style="height: 800%"></div>

<script type="text/javascript">
var dom2 = document.getElementById("e2");
var myChart2 = echarts.init(dom2);
var app = {};


// var xData2 = ['思茅区', '西盟县', '澜沧县'];
// var yData2 = ['站点数', '主管用户数', '服务商用户数'];
// var data2 = [
// [0,0,1],[1,1,4],[2,2,7],
// [1,0,2],[0,1,5],[1,2,8],
// [2,0,3],[2,1,6],[0,2,9]
// ];

var xData2 = <?php echo json_encode($xData2);?>;
var yData2 = <?php echo json_encode($yData);?>;
var data2 = <?php echo json_encode($dData);?>;

option2 = {
        backgroundColor: '#eee',
    // tooltip : { // 提示框
    //     trigger : 'item',
    //     formatter : '{a}:{b}: {c}',
    // },
    visualMap: {
        show:false,
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        name:'疾病',
        nameGap: 1,
        type: 'category',
        data: xData2,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    yAxis3D: {
        name:'',
        type: 'category',
        data: yData2,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    zAxis3D: {
        name:'数量(个)',
        type: 'value',
        minInterval: 1
    },
    grid3D: {
        boxWidth: 100,
        // boxHeight:100,
        boxDepth: 100,
        // postEffect:true,
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            },
            ambient: {
                intensity: 0.3
            }
        },
        viewControl:{
            // distane:800,
            alpha: 0,
            beta: 0,
        }
    },
    series: [{
        type: 'scatter3D',
        // name:'ljss',
        data: data2.map(function (item) {
            return {
                value: [item[0], item[1], item[2]],
                // name: 'p',
                // label:{
                //     formatter: '{a}:{b}: {c}',
                // }
            }
        }),
        shading: 'lambert',
        label: {
            // show: true,
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },

        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                }
            },
        }
    }]
}

if (option2 && typeof option2 === "object") {
    myChart2.setOption(option2, true);
}

</script>
{/block}